<template>
  <div style="margin-top:20px">
    <!-- 统计总数 -->
    <div style="display: inline-block;float:left;margin-right: 30px; ">
      <div class="boxOne">
        <img src="@/assets/Grid.png" >

       <span style="margin-left:90px">
          <p>商品数量</p>
        <p>{{ data.goodsCount}}</p>
       </span>
      </div>
      <div class="boxOne">
        <img src="@/assets/消息.png" alt="">
        <span style="margin-left:90px">
          <p>未发订单</p>
        <p>{{ data.waitStockCount}}</p>
        </span>
      </div>
    </div>
    <!-- 柱状图 -->
    <div
      id="Histogram"
      style="width: 600px;height:400px;display: flex;float:left; "
    ></div>
    <!-- 折线图 -->
    <div id="lineChart" style="width: 600px;height:400px;display: flex;float:left; "></div>
    <!-- 扇形统计图1 -->
    <div id="sectorStatisticalOne" style="width: 600px;height:400px;display: flex;float:left; "></div>
    <!-- 扇形统计图2 -->
    <div id="sectorStatisticalTwo" style="width: 600px;height:400px;display: flex;float:left; "></div>
  </div>
</template>
<script>
import http from "@/util/http";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
// import { GridComponent } from 'echarts/components';
// import { BarChart } from 'echarts/charts';
// import { CanvasRenderer } from 'echarts/renderers';
export default {
  components: {
    // GridComponent, BarChart, CanvasRenderer
  },
  data() {
    return {
      // 时间和订单数
      data: {},
    };
  },
  created() {
    // this.Echarts();
  },
  mounted() {
    this.show();
  },
  methods: {
    // Echarts() {
    //   let data = {
    //     _gp: "admin.dashboard",
    //     _mt: "integral",
    //   };
    //   http.post(data).then((res) => {
    //     console.log(res, "首页");
    //     this.data = res.data.data;
    //   });
    // },
    show() {
      let data = {
        _gp: "admin.dashboard",
        _mt: "integral",
      };
      http.post(data).then((res) => {
        if (200 == res.data.errno) {
          this.data = res.data.data;
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById("Histogram"));
          //1柱状图---- 绘制图表
          myChart.setOption({
            title: {
              text: "七月订单",
              subtext: "订单数",
            },
            legend: {
              //图例组件----展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
              data: ["七月订单"],
              right: "10%",
            },
            xAxis: {
              type: "category",
              data: this.data.daysOrder[0],
              axisTick: {
                alignWithLabel: true,
              },
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "七月订单",
                data: this.data.daysOrder[1],
                type: "bar",
              },
            ],
          });
          // 2折线图---
          let lineChart = echarts.init(document.getElementById("lineChart"));
          lineChart.setOption({
            title: {
              text: "七月成交金额",
              subtext: "订单数",
            },
            legend: {
              //图例组件----展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
              data: ["订单数"],
              right: "10%",
            },
            xAxis: {
              type: "category",
              data: this.data.daysSum[0],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "订单数",
                data: this.data.daysSum[1],
                type: "line",
              },
            ],
          });
          // 3扇形统计图 1---sectorStatisticalOne
          let sectorStatisticalOne = echarts.init(
            document.getElementById("sectorStatisticalOne")
          );
          sectorStatisticalOne.setOption({
            title: {
              text: "订单地区分布",
            },
            tooltip: {//提示框组件。
              trigger: "item",//触发类型--数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            },
            legend: {//图例组件。
              data: ["地区分布"],
              right: "10%",
            },
            series: [
              {
                name: "地区分布",
                type: "pie",
                radius: "50%",
                data: this.data.area,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
          // 4扇形统计 2---sectorStatisticalTwo
           let sectorStatisticalTwo = echarts.init(
            document.getElementById("sectorStatisticalTwo")
          );
          sectorStatisticalTwo.setOption({
               title: {
              text: "订单地区分布",
            },
            tooltip: {//提示框组件。
              trigger: "item",//触发类型--数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            },
            series: [
              {
                name: "地区分布",
                type: "pie",
                radius: "50%",
                data: this.data.channel,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          })
        } else {
          ElMessage.error(res.data.errmsg);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.boxOne {
  width: 200px;
  height: 80px;
  padding-left: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  display: flex;
  align-items: center;
  border: #ccc 1px solid;
  background-color: #fff;
}
</style>
